#ifndef WEB_PAGE_H
#define WEB_PAGE_H
String webPage =
    String("") + "<html>" +
    "<head>" +
    "<meta charset=\"UTF-8\">" +
    "    <title>ESP8266 Web Server</title>" +
    "    <script defer=\"defer\">" +
    "        function sendByGET(msg) {" +
    "            var xmlhttp;" +
    "            if (window.XMLHttpRequest) {" +
    "                xmlhttp = new XMLHttpRequest();" +
    "            } else {" +
    "                xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");" +
    "            }" +
    "            xmlhttp.onreadystatechange = function () {" +
    "                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {" +
    "                    document.getElementById(\"txtState\").innerHTML = xmlhttp.responseText;" +
    "                }" +
    "            }," +
    "            xmlhttp.open(\"GET\", msg, true);" +
    "            xmlhttp.send(); " +
    "        }" +
    "        function sendSpeedChange(){ " +
    "            var value = document.getElementById('range').value;" +
    "            document.getElementById('speed').innerHTML = value;" +
    "            sendByGET(Number(value) + 200);" +
    "        }" +
    "    </script>" +
    "</head>" +
    "<body>" +
    "<div align=\"center\" id=\"txtState\">Unkwon</div>" +
    "<div align=\"center\"><h1>ESP8266 Lock</h1>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(110)\"><font size=\"20\">Lock</font></button>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(111)\"><font size=\"20\">unLock</font></button>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(112)\"><font size=\"20\">FR</font></button><br>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(113)\"><font size=\"20\">LT</font></button>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(114)\"><font size=\"20\">ST</font></button>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(115)\"><font size=\"20\">RT</font></button><br>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(116)\"><font size=\"20\">BL</font></button>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(117)\"><font size=\"20\">BC</font></button>" +
    "<button style=\"height:200px;width:200px\" onclick=\"sendByGET(118)\"><font size=\"20\">BR</font></button></div>" +
    "<div align=\"center\"><h1>SPEED CHANGE</h1>" +
    "<input id=\"range\" type=\"range\" min=\"0\" max=\"10\" value=\"7\" onchange=\"sendSpeedChange()\" oninput=\"sendSpeedChange()\" style=\"height:200px;width:400px\"/>" +
    "<span id=\"speed\">7</span>" +
    "</body>" +
    "</html>";

String webLockPage =
    String("") + "<html>" +
    "<head>" +
    "<meta charset=\"UTF-8\">" +
    "    <title>ESP Web Server</title>" +
    "    <script defer=\"defer\">" +
    "        function sendByGET(msg) {" +
    "            var xmlhttp;" +
    "            if (window.XMLHttpRequest) {" +
    "                xmlhttp = new XMLHttpRequest();" +
    "            } else {" +
    "                xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");" +
    "            }" +
    "            xmlhttp.onreadystatechange = function () {" +
    "                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {" +
    "                    document.getElementById(\"txtState\").innerHTML = xmlhttp.responseText;" +
    "                }" +
    "            }," +
    "            xmlhttp.open(\"GET\", msg, true);" +
    "            xmlhttp.send(); " +
    "        }" +
    "        function sendStepChange(){ " +
    "            var value = document.getElementById('range').value;" +
    "            document.getElementById('step').innerHTML = value;" +
    "            sendByGET( \"?cmd=\"+ (Number(value) + 1000));" +
    "        }" +
    "        function sendClickCmd(msg){ " +
    "            sendByGET( \"?cmd=\"+ msg);" +
    "        }" +
    "    </script>" +
    "</head>" +
    "<body>" +
    "<div align=\"center\" id=\"txtState\">None</div>" +
    "<div align=\"center\"><h1>ESP Lock</h1>" +
    "<button style=\"height:200px;width:300px\" onclick=\"sendClickCmd(103)\"><font size=\"10\">LOCK_ON</font></button>" +
    "<button style=\"height:200px;width:300px\" onclick=\"sendClickCmd(104)\"><font size=\"10\">LOCK_OFF</font></button></div>" + 
    "<div align=\"center\"><h1>STEP CHANGE</h1>" +
    "<input id=\"range\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" onchange=\"sendStepChange()\" oninput=\"sendStepChange()\" style=\"height:50px;width:500px;autofocus=true\"/>" +
    "<span id=\"step\">7</span>" +
    "</body>" +
    "</html>";
#endif